<template>
  <!-- 强制装备 -->
  <div class="pageWrap">
    <el-tabs type="card" v-model="activeGroupI" @tab-click="groupChange">
      <el-tab-pane v-for="(v,i) in groupArr" :key="i" :label="v.name" :name="'g'+i"></el-tab-pane>
    </el-tabs>
    <p class="tTitle">
      <span>强制装备</span>
      <el-button @click="addFit">添加</el-button>
    </p>
    <el-table border :data="fitData" class="fittab" style="margin-top:10px;" row-key="ind">
      <el-table-column label="装备名称" align="center">
        <template slot-scope="{row}">
          <el-input v-model="row.name" placeholder="请输入装备名称" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="装备状态" align="center">
        <template slot-scope="{row}">
          <el-select v-model="row.equipStatu" clearable placeholder="请选择">
            <el-option label="组委会提供" value="G"></el-option>
            <el-option label="商城推荐" value="S"></el-option>
            <el-option label="自备" value="Z"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <!-- <el-table-column label="装备编号" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{row.uid?row.uid:'暂无'}}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="装备绑定" width="250" align="center">
        <template slot-scope="{row}">
          <el-select
            v-model="row.shopId"
            clearable
            filterable
            placeholder="请选择"
            style="width:100%"
            :disabled="row.equipStatu!='S'"
          >
            <!-- @change="togS(row,$event)" -->
            <el-option v-for="(item,i) in goodsArr" :key="i" :label="item.name" :value="item.links"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{$index}">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            v-if="$index!=0"
            @click="fitData.splice($index,1)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <p class="tTitle">
      <span>推荐装备</span>
      <el-button @click="addRecom">添加</el-button>
    </p>
    <el-table border :data="recomData" class="recomtab" style="margin-top:10px;" row-key="ind">
      <el-table-column label="装备名称" align="center">
        <template slot-scope="{row}">
          <el-input v-model="row.name" placeholder="请输入装备名称" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="装备状态" align="center">
        <template slot-scope="{row}">
          <el-select v-model="row.equipStatu" clearable placeholder="请选择">
            <el-option label="组委会提供" value="G"></el-option>
            <el-option label="商城推荐" value="S"></el-option>
            <el-option label="自备" value="Z"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <!-- <el-table-column label="装备编号" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{row.uid?row.uid:'暂无'}}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="装备绑定" width="250" align="center">
        <template slot-scope="{row}">
          <el-select
            v-model="row.shopId"
            clearable
            filterable
            placeholder="请选择"
            style="width:100%"
            :disabled="row.equipStatu!='S'"
          >
            <!-- @change="togS(row,$event)" -->
            <el-option v-for="(item,i) in goodsArr" :key="i" :label="item.name" :value="item.links"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{$index}">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            v-if="$index!=0"
            @click="recomData.splice($index,1)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:10px">
      <!-- <el-button @click="addFit">添加</el-button> -->
      <el-button type="primary" @click="saveFit">保存</el-button>
      <el-button type="warning" @click="resetFit">重置</el-button>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
var initFit = {
  ind: 1,
  name: "",
  equipStatu: "G",
  shopId: "",
  uid: 1,
};
export default {
  data() {
    return {
      activeGroupI: "g0",
      groupArr: [], //赛项
      fitData: [], //强装数据
      goodsArr: [], //商品列表
      recomData: [],
    };
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(
        ".fittab .el-table__body-wrapper tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        animation: 150,
        onEnd({ newIndex, oldIndex }) {
          setTimeout(() => {
            let currRow = _this.fitData.splice(oldIndex, 1)[0];
            _this.fitData.splice(newIndex, 0, currRow);
            _this.fitData.forEach((v, i) => {
              v.uid = i + 1;
            });
          }, 100);
          //   _this.savePoints()
        },
      });
    },
    rowDropR() {
      const tbody = document.querySelector(
        ".recomtab .el-table__body-wrapper tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        animation: 150,
        onEnd({ newIndex, oldIndex }) {
          setTimeout(() => {
            let currRow = _this.recomData.splice(oldIndex, 1)[0];
            _this.recomData.splice(newIndex, 0, currRow);
            _this.recomData.forEach((v, i) => {
              v.uid = i + 1;
            });
          }, 100);
        },
      });
    },
    groupChange() {
      let ii = this.activeGroupI.replace(/g/g, "");
      let gId = this.groupArr[ii].id;
      this.getFit(gId);
    },
    // 获取赛项
    getGroupArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          this.groupArr = rr.matchInfoLists;
          this.groupChange();
        });
    },
    // 获取该赛项下的强装
    getFit(gId) {
      this.$axios
        .get("/sbr/equips/getEquipList/" + this.$Base64.encode(gId))
        .then((res) => {
          let rr = res.data.data;
          if (rr.length == 0) rr = [JSON.parse(JSON.stringify(initFit))];
          // console.log(rr);
          let a=rr.filter(v=>{
            return v.type=='强制装备'
          }) 
          a.forEach((v, i) => {
            v.ind = i + 1;
            v.uid = i + 1;
          });
          let b=rr.filter(v=>{
            return v.type=='推荐装备'
          })
          b.forEach((v, i) => {
            v.ind = i + 1;
            v.uid = i + 1;
          });
          this.fitData = a;
          this.recomData=b
        });
    },
    // 重置
    resetFit() {
      let ii = this.activeGroupI.replace(/g/g, "");
      let gId = this.groupArr[ii].id;
      let oo = {
        matchId: Number(this.$Base64.decode(sessionStorage.getItem("MandA"))),
        groupId: gId,
        data: [],
      };
      this.$axios.post("/sbr/equips/addEquip", oo).then((res) => {
        this.$message.success("重置成功");
        this.getFit(gId);
      });
    },
    // 获取商品列表
    getGoodsArr() {
      this.$axios.get("/sbr/shop/getShopKuPic").then((res) => {
        let rr = res.data.data;
        this.goodsArr = rr;
        this.getGroupArr();
      });
    },
    // 添加强装
    addFit() {
      initFit.ind = this.fitData.length + 1;
      initFit.uid = this.fitData.length + 1;
      initFit.type = "强制装备";
      this.fitData.push(JSON.parse(JSON.stringify(initFit)));
    },
    addRecom() {
      initFit.ind = this.recomData.length + 1;
      initFit.uid = this.recomData.length + 1;
      initFit.type = "推荐装备";
      this.recomData.push(JSON.parse(JSON.stringify(initFit)));
    },
    // 保存强装
    saveFit() {
      let empty = this.fitData.find((v) => {
        return v.name == "";
      });
      let emptyR = this.recomData.find((v) => {
        return v.name == "";
      });
      if (empty || emptyR) {
        this.$message.error("请填写装备名称");
        return false;
      }
      let lastData = this.fitData.concat(this.recomData);
      lastData.forEach((v, i) => {
        v.uid = i + 1;
      });
      let ii = this.activeGroupI.replace(/g/g, "");
      let gId = this.groupArr[ii].id;
      console.log(lastData);
      let oo = {
        matchId: Number(this.$Base64.decode(sessionStorage.getItem("MandA"))),
        groupId: gId,
        data: lastData,
      };
      this.$axios.post("/sbr/equips/addEquip", oo).then((res) => {
        // let rr = res.data.data;
        this.$message.success("保存成功");
        this.getFit(gId);
      });
    },
  },
  mounted() {
    let that = this;
    setTimeout(() => {
      that.rowDrop();
      that.rowDropR();
    }, 100);
    this.getGoodsArr();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.tTitle {
  font-size: 20px;
  line-height: 40px;
  font-weight: 500;
}
</style>